<template>
	<view>
		<view
			style="padding: 20rpx 40rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #fff;">
			<view style="height: 100rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<text style="font-size: 28rpx; color: #333;">{{user.nick_name}}</text>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<text style="margin-right: 10rpx;color: #999;">ID:{{8006001 + parseInt(user.id)}}</text>
					<!-- <u-image v-if="user.level == 1" width="129rpx" height="48rpx" :src="images.levelPt" mode="widthFix">
					</u-image>
					<u-image v-if="user.level == 2" width="129rpx" height="48rpx" :src="images.levelJz" mode="widthFix">
					</u-image>
					<u-image v-if="user.level == 3" width="129rpx" height="48rpx" :src="images.levelCy" mode="widthFix">
					</u-image>
					<u-image v-if="user.level == 4" width="129rpx" height="48rpx" :src="images.levelHh" mode="widthFix">
					</u-image> -->
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;">
				<u-avatar :src="user.avatar" size="124"></u-avatar>
				<view v-if="user.is_vip == 0"
					style="width: 40rpx;height: 40rpx;position: absolute;bottom: 20rpx;right: 0;">
					<u-image width="40rpx" height="40rpx" src="https://img.koalalf.com/center/s-vip.png"
						mode="widthFix"></u-image>
				</view>
			</view>
			<!-- <u-avatar :src="user.avatar" size="124"></u-avatar> -->
		</view>

		<view style="margin-top: 20rpx;">
			<u-cell-group customStyle="backgroundColor:#fff">
				<u-cell  @click="openPage('pages/auth/bindMobile', {name: user.nick_name, mobileText: user.mobile})" isLink :value="mobileText" title="手机号" :center="true"></u-cell>
				<u-cell @click="openPage('pages/setting/changWxNumber', {wx_number: user.wx_number})" title="微信号" isLink :value="user.wx_number"></u-cell>
				<u-cell @click="openPage('pages/setting/changZfbNumber', {alipay_number: user.alipay_number})" title="支付宝" isLink :value="user.alipay_number"></u-cell>
			</u-cell-group>
		</view>
		
		<view style="margin-top: 20rpx;">
			<u-cell-group customStyle="backgroundColor:#fff">
				<u-cell  @click="openPage('pages/auth/FourElements', {name: user.nick_name, mobileText: user.mobile})" title="实名认证" isLink></u-cell>
				<!-- <u-cell @click="openPage('pages/setting/changWxNumber', {wx_number: user.wx_number})" title="身份证" isLink ></u-cell> -->
			</u-cell-group>
		</view>

		<view style="margin-top: 20rpx;">
			<u-cell-group customStyle="backgroundColor:#fff">
				<u-cell iconStyle="fontSize:'24rpx'" title="推送消息" :arrow="false"> 
					<!-- icon="bell" icon="error-circle" -->
					<u-switch size="40" slot="right-icon" v-model="checked"></u-switch>
				</u-cell>
				<u-cell iconStyle="fontSize:'24rpx'" title="版本号" :value="version" :arrow="false">
				</u-cell>
			</u-cell-group>
		</view>
		
		<view style="margin-top: 20rpx;">
			<u-cell-group customStyle="backgroundColor:#fff">
				<u-cell  @click="openPage('pages/setting/cancellation', {})" title="注销账号" isLink></u-cell>
				<!-- <u-cell @click="openPage('pages/setting/changWxNumber', {wx_number: user.wx_number})" title="身份证" isLink ></u-cell> -->
			</u-cell-group>
		</view>

		<view style="padding: 40rpx;">
			<!-- <u-button @click="updateUserInfo()" open-type="getUserInfo" @tap="getUserProfile" shape="circle"
				:custom-style="customStyle">更新资料</u-button> -->
			<u-button @click="logOut()" shape="circle">退出登录</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	import {
		userInfoByToken,
		wechatInfoSave,
		wechatBindMobile
	} from '@/common/http.api.js'
	export default {
		data() {
			return {
				images: {},
				checked: true,
				user: null,
				version: '1.0',
				mobileText: "立即绑定"
			}
		},
		onLoad({
			user
		}) {
			let that = this;

			that.user = JSON.parse(user)
			that.images = imagesUrl.my

			uni.$on('updateUserInfo', function(data) {
				userInfoByToken({}).then(res => {
					that.user = res
					that.mobileText = res.mobile
					uni.setStorageSync('user_info', JSON.stringify(res))
				})
			})

			if (that.user.mobile) {
				that.mobileText = that.user.mobile
			}
			
			// #ifdef APP-PLUS
			this.version = plus.runtime.version
			// #endif
		},
		methods: {
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			logOut() {
				uni.setStorageSync('token', null)
				this.$u.route('pages/auth/mobileLogin')
			},
			updateUserInfo() {
				let that = this;
				uni.getUserProfile({
					desc: '完善资料',
					provider: 'weixin',
					success: function(infoRes) {
						uni.showLoading({
							title: '正在修改信息'
						})

						wechatInfoSave({
							nick_name: infoRes.userInfo.nickName,
							avatar: infoRes.userInfo.avatarUrl
						}).then(res => {
							uni.$emit('updateUserInfo', {
								msg: '刷新用户信息'
							})
							uni.hideLoading()
							that.$u.toast('修改成功');
						})
					}
				});
			},
			bindMobile(data) {
				let that = this;
				if (data.detail.errMsg == "getPhoneNumber:ok") {
					uni.checkSession({
						success() {
							let sessionKey = uni.getStorageSync('session_key');
							that.updateBindMobile(null, data.detail.encryptedData, data.detail.iv, sessionKey)
						},
						fail() {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									that.updateBindMobile(loginRes.code, data.detail.encryptedData,
										data.detail.iv, null)
								}
							});
						}
					})

				} else {
					that.$refs.uToast.show({
						title: '保存失败' + data.detail.errMsg,
						type: 'error',
					})
				}
			},

			updateBindMobile(code, encryptedData, iv, sessionKey) {
				let that = this;
				uni.showLoading({
					title: '正在绑定手机号'
				})
				wechatBindMobile({
					code: code,
					mobile: encryptedData,
					iv: iv,
					session_key: sessionKey
				}).then(res => {
					console.log(res)
					uni.$emit('updateUserInfo', {
						msg: '刷新用户信息'
					})

					uni.hideLoading()
					that.$u.toast('绑定成功');
				})
			}
		}
	}
</script>

<style>
	body {
		background-color: #f5f5f5;
	}
</style>
